<template>
  <div class="dashboard-container">
    <div class="dashboard-text">当前用户：<span style="color: red">{{ name }}</span></div>

    <el-row :gutter="20">
      <el-col v-for="(list, rName) in resources" :key="rName" :span="8">
        <el-card shadow="hover" style="height:300px">
          <div slot="header">
            <span>{{rName}}</span>
          </div>
          <div v-for="r in list" :key="r.id">
            <el-tooltip :content="r.description" placement="top-start">
              <el-link :href="r.url + '?sessionId=' +s_id" target="_blank">{{r.name}}</el-link>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getResources } from '@/api/user'
import { getSessionId } from '@/utils/auth'

export default {
  data() {
    return {
      s_id: getSessionId(),
      resources: {}
    }
  },
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getResources().then(response => {
        if(response.code == 20000){
          this.resources = response.data;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row{
  margin-top: 20px;
}
.el-col {
  margin-bottom: 20px;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
